<template>
    <view>
        <public-module></public-module>
        <wlk-navbar  title="公告列表" navbarType='3' ></wlk-navbar>
        <block v-if="loadStatus=='nomore' && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.search"
                        text="没有公告内容"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view class="list pd30">
                <view class="wd100 item wlkflex mb20 br08 shadow overHidden bgw" v-for="(item,index) in list" @click="$Router.push('/pages/notice/detail?id='+item.id)">
                    <view class="big-img relative wd100">
                        <image class="wd100 hg100 block" lazy-load :src="item.image"  mode="aspectFill"/>
                        <view class="wd100 inside-info">
                            <view class="wlkflex read-like mb10">
                                <view class="wlkflex">
                                    <uni-icons type="notification" color="#FFFFFF" size="15"></uni-icons>
                                    <view class="ml10">{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</view>
                                </view>
                            </view>
                            <view class="u-line-2 title">{{item.title}}</view>
                        </view>
                    </view>
                </view>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </view>
        </block>
	</view>
</template>

<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
		data() {
			return {
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
			};
		},
        computed:{
            ...mapState(['themeColor','uEmpty'])
        },
        onLoad(e) {
         _self=this;
        },
        onShow(){
            this.loadStatus = 'loading';
            this.page = 1;
            this.list = [];
            this.getData();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            getData(){
                uni.$u.http.post('notice/getList', {
                    page: this.page,
                }).then(res => {
                    if (res && res.data && res.data.rows) {
                        this.list = this.list.concat(res.data.rows);
                    }
                    this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
                }).catch(res => {
                })
            },

        }

	}
</script>

<style lang="scss">
    page{
        background-color: $uni-bg-color-grey;
        .list{
            .item{
               .big-img{
                   height:283rpx;
               }
               .big-info{
                   padding: 20rpx 20rpx 20rpx 20rpx;
                   pointer-events: none;
                   .title{
                       font-weight: bold;
                       font-size: $font-lt;
                   }
                   .read-like {
                       font-size: $font-sm;
                   }
               }
               .inside-info{
                   padding: 20rpx 20rpx 20rpx 20rpx;
                   pointer-events: none;
                   position: absolute;
                   bottom: 0;
                   background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
                   color: #FFFFFF;
                   .title{
                       font-weight: bold;
                       font-size: $font-lt;
                   }
                   .read-like {
                       font-size: $font-sm;
                   }
               }
               .note-inside-auth{
                   font-size: $font-sm;
                   line-height: 18px;
                   background-color: white;
                   border-radius:2px;
                   padding: 0 5px;
                   color: $-color-normal;
                   .bz{
                       color: #d40;
                   }
               }

            }
        }

    }



</style>
